import React, { useRef } from 'react';
import { ActionType, ProTable, ProColumns, ProFormSwitch } from '@ant-design/pro-components';

import { convertTagColor, downloadFile, saveDataParams, proTableRequest } from '@/app/common/utils';

interface UserDataSource {}

function User() {
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<any, 'text'>[] = [
    {
      title: '用户ID',
      dataIndex: 'userId',
      search: false,
      editable: false,
    },
    {
      title: '用户名',
      dataIndex: 'userName',
      editable: false,
    },
    {
      title: '昵称',
      dataIndex: 'nickName',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      search: false,
      editable: false,
    },
    {
      title: '手机号',
      dataIndex: 'phonenumber',
      search: false,
      editable: false,
    },
    {
      title: '性别',
      dataIndex: 'sex',
      search: false,
      editable: false,
      valueEnum: {
        0: {
          text: '男',
          status: '',
        },
        1: {
          text: '女',
          status: '',
        },
        2: {
          text: '未知',
          status: '',
        },
      },
    },
    {
      title: '部门',
      dataIndex: 'dept',
      search: false,
      editable: false,
      renderText: _record => {
        return _record.deptName;
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      search: false,
      renderFormItem: (schema, config, form) => {
        return <ProFormSwitch></ProFormSwitch>;
      },
      valueEnum: {
        0: {
          text: '启用',
          status: 'Success',
        },
        1: {
          text: '停用',
          status: 'Processing',
        },
      },
    },
    {
      title: '最后登陆IP',
      dataIndex: 'loginIp',
      search: false,
      editable: false,
    },
    {
      title: '最后登陆时间',
      dataIndex: 'loginDate',
      valueType: 'dateTime',
      search: false,
      editable: false,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (_text, record, _, action) => {
        return [
          <a
            key="editable"
            onClick={() => {
              action?.startEditable?.(record.userId);
            }}
          >
            编辑
          </a>,
        ];
      },
    },
  ];
  return (
    <ProTable<UserDataSource>
      key="sys-user"
      actionRef={actionRef}
      dateFormatter="string"
      rowKey="userId"
      headerTitle="用户管理"
      columns={columns}
      request={proTableRequest('/system/user/list')}
      pagination={{
        pageSize: 30,
      }}
      editable={{
        type: 'multiple',
      }}
      // toolBarRender={action => {
      //   return [<CreateMenuForm key="create-menu" actionRef={action} title="新建菜单" />];
      // }}
    />
  );
}

export default User;
